<template>
  <div>
    <el-select v-model="uid"
               filterable
               @change="getUserToArticleList"
               placeholder="请指定用户">
      <el-option v-for="item in userList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="aid"
               filterable
               @change="getCommentList"
               placeholder="请指定文章">
      <el-option v-for="item in articleList"
                 :key="item.id"
                 :label="item.title"
                 :value="item.id">
      </el-option>
    </el-select>
    <!-- 添加按钮 -->
    <el-button type="primary"
               icon="el-icon-plus"
               style="margin: 10px 0"
               @click="addRole">添加</el-button>
    <!-- 品牌表格 -->
    <!-- 
    data  显示的数据
    prop	对应列内容的字段名，也可以使用 property 属性
    type:index 通过给 type=index 的列传入 index 属性，可以自定义索引  
    slot-scope  用于给插槽定义作用域
    label   显示的标题
   -->
    <el-table style="width: 100%"
              border
              :data="viewlist">
      <el-table-column prop="id"
                       width="80px"
                       label="序号"
                       align="center">
      </el-table-column>
      <el-table-column prop="content"
                       label="评论内容"></el-table-column>
      <el-table-column prop="create_time"
                       label="评论时间"></el-table-column>
      <el-table-column prop="prop"
                       label="操作">
        <template slot-scope="{ row, $index }">
          <el-button type="warning"
                     icon="el-icon-edit"
                     @click="updateRole(row)">修改</el-button>
          <el-button type="primary"
                     icon="el-icon-delete"
                     @click="deleteRole(row)"> 删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!-- 
    layout 组件布局，子组件名用逗号分隔
    current-page	当前页数，支持 .sync 修饰符
    page-sizes	每页显示个数选择器的选项设置
    page-size	每页显示条目个数，支持 .sync 修饰符
    total	总条目数
   -->
    <el-pagination style="margin-top: 20px; text-align: center"
                   layout="prev, pager, next, jumper, ->,sizes,total"
                   :current-page="page"
                   :page-size="limit"
                   @size-change="getPageList"
                   @current-change="getPageList"
                   :page-sizes="[3, 5, 10]"
                   :total="total">
    </el-pagination>
    <!-- 添加角色对话框 -->
    <el-dialog :title="tmForm.id ? '修改评论' : '添加评论'"
               :visible.sync="dialogVisible"
               @close="closeDialog"
               width="50%">
      <!-- 品牌名称 -->
      <el-form style="width: 100%"
               :model="tmForm"
               ref="ruleform">
        <el-form-item label="评论内容"
                      label-width="80px"
                      prop="content">
          <el-input v-model="tmForm.content"></el-input>
        </el-form-item>
        <el-form-item label="label">
          <el-date-picker v-model="tmForm.create_time"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="AddOrUpdateRole">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Role',

  data () {
    return {
      userList: [],
      // 分页器当前页数
      page: 1,
      // 当前页数展示条目
      limit: 10,
      // 总共数据条数
      total: 0,
      viewlist: [],
      // 是否显示对话框
      dialogVisible: false,
      // 对话框数据
      tmForm: {
        content: "",
        create_time: "",
      },
      uid: '',
      aid: "",
      centerDialogVisible: false,
      commentlist: [],
      articleList: []
    };
  },

  created () {
    this.getUserList()
    this.getPageList()
  },

  methods: {
    async getUserList () {
      const res = await this.$API.user.getUserList()
      if (res.status == 200) {
        this.userList = res.data
      }
    },
    getPageList (pager = 1) {
      this.page = pager
      let cnum = (this.page - 1) * this.viewlist.length
      let pnum = this.limit + cnum
      if (pnum > this.commentlist) pnum = this.total
      this.viewlist = this.commentlist.slice(cnum, this.limit + cnum)
    },
    // 修改角色权限
    updateRole (row) {
      this.dialogVisible = true
      this.tmForm = { ...row }
    },
    // 添加角色
    addRole () {
      this.dialogVisible = true

    },
    // 获取文章列表
    async getUserToArticleList () {
      const res = await this.$API.article.getUserToArticleList(this.uid, 'list')
      console.log('comments', res);
      this.articleList = res.data
    },
    // 修改删除
    async AddOrUpdateRole () {
      // 修改
      if (this.tmForm.id) {
        console.log('userList', this.$qs.stringify(this.tmForm));
        const res = await this.$API.comment.updateCommment(this.$qs.stringify(this.tmForm))
        console.log('addRole', res);
        if (res.status == 200) {
          this.$message.success(res.msg)
          this.getUserToArticleList()
          this.getCommentList()
          this.dialogVisible = false
        }
      } else {
        const res = await this.$API.comment.addComment(this.aid, this.$qs.stringify(this.tmForm))
        if (res.status == 200) {
          this.$message.success(res.msg)
          this.getCommentList2()
          this.dialogVisible = false

        }
      }
    },
    // 删除角色
    async deleteRole (row) {
      var that = this
      const res = await this.$API.comment.deleteCommment(row.id)
      if (res.status == 200) {
        this.$message.success(res.msg)
        that.getCommentList2()
      }
    },
    getCommentList () {
      var that = this
      console.log(this.articleList);
      let alist = this.articleList.filter(item => {
        return item.id == that.aid
      })
      that.commentlist = alist[0].commentlist
      console.log('comments', that.commentlist);
      that.total = that.commentlist.length
      that.getPageList()
    },
    async getCommentList2 () {
      const res = await this.$API.comment.getArticleToComment(this.aid)
      console.log('cmmentlist', res);
      if (res.status == 200) {
        this.commentlist = res.data
        this.getPageList()
      }
    },
    // 关闭对话框
    closeDialog () {
      this.dialogVisible = false
      this.tmForm = {}
    }
  },
};
</script>

<style scoped>
</style>